class Enlarge{
    constructor(el){
        this.el = document.querySelector(el)
        this.picObj = this.el.querySelector('.picture') 
        this.maskObj = this.el.querySelector('.picture .mask') 
        this.enlargeObj = this.el.querySelector('.box .enlarge') 
        this.init()
    }

    // 总开关
    init(){
        // 鼠标移入移出
        this.overOut()
        // 遮面罩移动
        this.maskMove()
        //放大镜尺寸
        this.enlargeSize()
        // 点击切换图片
        this.changPic()
    }
    // 获取非行内样式
    getStyle(tagObj,attr){
        return window.getComputedStyle ? window.getComputedStyle(tagObj)[attr] :tagObj.currentStyle[attr]
    }

    // 放大框尺寸调整
    enlargeSize(){
        // 800 enlargeb /  450 picb  =200 enlarge / 100 mask
    let picH = parseInt(this.getStyle(this.picObj,'height'))
    let picW = parseInt(this.getStyle(this.picObj,'width'))
    // console.log(picH,picW);
    let maskH = parseInt(this.getStyle(this.maskObj,'height'))
    let maskW = parseInt(this.getStyle(this.maskObj,'width'))

    let enlargeBackW = this.getStyle(this.enlargeObj,'background-size').split(' ')
    console.log(enlargeBackW);
    let enlargebgW = parseInt(enlargeBackW[0])
    let enlargebgH = parseInt(enlargeBackW[1])
    console.log(enlargebgW,enlargebgH);

    let w = (enlargebgW / picW ) * maskW
    let h = (enlargebgH / picH ) * maskH
    this.enlargeObj.style.width = w + 'px'
    this.enlargeObj.style.height = h + 'px'
    }

    // 鼠标移入和移出
    overOut(){
        let picObj = this.el.querySelector('.box .picture')
        picObj.onmouseover = () => {
            this.el.querySelector('.mask').style.display = 'block'
            this.el.querySelector('.enlarge').style.display = 'block'
        }
        picObj.onmouseout = () => {
            this.el.querySelector('.mask').style.display = 'none'
            this.el.querySelector('.enlarge').style.display = 'none'
        }
    }
    // 鼠标移动显示
    maskMove(){
        this.picObj.onmousemove = (evt) => {
            let e = evt || window.event
            let x = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth/2
            let y = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight/2
            if(x<0) x = 0
            if(y<0) y = 0
            let maxX = this.picObj.clientWidth - this.maskObj.offsetWidth
            let maxY = this.picObj.clientHeight - this.maskObj.offsetHeight
            if(x>maxX) x = maxX
            if(y>maxY) y = maxY
            this.maskObj.style.left = x + 'px'
            this.maskObj.style.top = y + 'px'

            // 同步放大镜位置
            this.Tbposition(x,y)
        }
    
    }
    // 同步位置
    Tbposition(x,y){
        // 左边移动1px  右边移动距离为 x = (800/450) * 1
        let picH = parseInt(this.getStyle(this.picObj,'height'))
        let picW = parseInt(this.getStyle(this.picObj,'width'))

        let enlargeBackW = this.getStyle(this.enlargeObj,'background-size').split(' ')
        console.log(enlargeBackW);
        let enlargebgW = parseInt(enlargeBackW[0])
        let enlargebgH = parseInt(enlargeBackW[1])
        let l = (enlargebgW / picW ) * x
        let t = (enlargebgH / picH ) * y

        this.enlargeObj.style.backgroundPosition = `${-l}px ${-t}px`
    }

    // 点击切换图片
    // changPic(){
    //     let liOne = this.el.querySelector('ul li:nth-of-type(1)')
    //     let liTwo = this.el.querySelector('ul li:nth-of-type(2)')
    //     liOne.onclick = () => {
    //         this.picObj.style.backgroundImage = 'url(./1.webp)'
    //         this.enlargeObj.style.backgroundImage = 'url(./1.webp)'
    //     }
    //     liTwo.onclick = () => {
    //         this.picObj.style.backgroundImage = 'url(./2.webp)'
    //         this.enlargeObj.style.backgroundImage = 'url(./2.webp)'
    //     }
    // }
    changPic(){
        let ulObj = this.el.querySelectorAll('ul li')
        ulObj.forEach((item,i) => {
            item.onclick = () => {
                this.el.querySelector('ul li.active').className = ''
                ulObj[i].className = 'active'
                this.picObj.style.backgroundImage = `url(./${i+1}.webp)`
                this.enlargeObj.style.backgroundImage =  `url(./${i+1}.webp)`
                this.maskMove()
            }
        })
        
    }
}

export{Enlarge}